<template>
	<view class="shop_list">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">商家列表</block>
		</cu-custom>
		<view class="cu-bar search bg-white solid-bottom shadow-blur">
			<view class="search-form round">
				<text class="icon-search"></text>
				<input :adjust-position="false" type="search" @confirm="serchShop" placeholder="商城名称" confirm-type="search"></input>
			</view>
			<view class="action" @tap="toCity">
				<text>{{ params.city }}</text>
				<text class="icon-triangledownfill"></text>
			</view>
		</view>
		<view class="tabs flex solid-bottom shadow-blur">
			<view class="flex-sub flex justify-center align-center">
				<picker @change="PickerChange" :value="typeIndex" :range="strList">
					<view class="picker">
						{{ strList[typeIndex] }}
					</view>
				</picker>
			</view>
			<view class="flex-sub flex justify-center align-center">
				<picker @change="xChange" :value="cIndex" :range="plist">
					<view class="picker">
						{{ plist[cIndex] }}
					</view>
				</picker>
			</view>
			<view class="flex-sub flex justify-center align-center">
				<picker @change="oChange" :value="oIndex" :range="olist">
					<view class="picker">
						{{ olist[oIndex] }}
					</view>
				</picker>
			</view>											
		</view>
		<view class="main">
			<scroll-view scroll-y>
				<view class="list" v-if="shopList.length">
					<navigator class="item bg-white solid-bottom" hover-class="none" :url="'/shop/index?id='+item.id" v-for="item in shopList" :key="item.id">
						<view class="image">
							<image :src="item.logo"></image>
						</view>
						<view class="desc">
							<view class="name">{{ item.shop_name }}</view>
							<view class="star">
								<image :src="item.evaluationAvg >= x ? '/static/start_act.png' : '/static/start.png'" v-for="x in 5" :key="x"></image>
							</view>
							<!-- <view class="sell">销售量: {{ item.sell_count || 0 }}</view> -->
							<view class="send">
								<view>起送：{{ item.starting_fee }}</view>
								<view>销售量: {{ item.sell_count || 0 }}</view>
							</view>
							<view class="address">
								<view>
									地址：{{ item.address }}
								</view>
								<view>
									距离：{{ item.distance }}
								</view>
							</view>
						</view>
					</navigator>
				</view>
				<empty-data v-else>没有发现相关店铺~</empty-data>
			</scroll-view>
		</view>
	</view>
</template>


<script>
import { typeIndex, AreaList, getAllShop, Region, orderType, shopIndex } from '@/common/api/shop'
import { mapGetters } from 'vuex'
import { requestURL } from '@/common/utils/config'
export default {
	name: 'shopList',
	data () {
		return {
			shopList: [],
			shopType: '',
			o_index: 0,
			c_index: 0,
			tlist: [],
			clist: [],
			alist: [],
			params: {},
			onParams: {},
			typeId: '',
			distance: [
				{
					type: 1,
					name: '离我最近'
				},
				{
					type: 2,
					name: '好评优先'
				},
				{
					type: 3,
					name: '人气最高'
				}								
			]
		}
	},
	computed: {
		...mapGetters([
			'userCity'
		]),
		olist () {
			return this.distance.map(item => item.name)
		},
		plist () {
			return this.clist.map(item => item.Name)
		},
		strList () {
			return this.tlist.map(item => item.shoptype_name)
		},
		oIndex: {
			get () {
				return this.o_index
			},
			set (val) {
				this.o_index = val 
			}
		},
		cIndex: {
			get () {
				return this.c_index
			},
			set (val) {
				this.c_index = val
			}
		},
		typeIndex: {
			get () {
				if (!this.shopType) return 0
				return this.strList.indexOf(this.shopType)				
			},
			set (val) {
				this.shopType = val
			}
		}
	},
	onLoad(options) {
		this.typeId = options.id
		if (options.name) this.shopType = options.name.replace('商品分类：', '')
			if (JSON.stringify(this.userCity) === '{}') {
				this.params = {
					lat: 22.66667,
					lng:114.184822,
					city: '东莞市'
				}
			} else {
				this.params = {
					...this.userCity.location,
					city: this.userCity.city
				}
			}		
		if (options.city) this.params.city = options.city
		this.getList()
		if (+options.type === 1) this.AllShop()		
	},
	methods: {
		toCity () {
			uni.navigateTo({
				url: '/shop/city'
			})
		},
		async serchShop (e) {
			uni.showLoading()
			this.getSearch(e.target.value)
			uni.hideLoading()
		},
		async PickerChange(e) {
			this.typeIndex = this.strList[e.detail.value]
			this.typeId = this.tlist[this.typeIndex].id
			uni.showLoading()
			this.typeId !== '' ? await this.getType() : await this.AllShop()
			uni.hideLoading()
		},
		async xChange (e) {
			uni.showLoading()
			this.cIndex = e.detail.value
			await this.getRegion(this.clist[this.cIndex])
			uni.hideLoading()
		},
		async oChange (e) {
			uni.showLoading()
			this.oIndex = e.detail.value
			await this.getTypeList(e.detail.value + 1)
			uni.hideLoading()
		},
		async getList () {
			uni.showLoading()
			await this.getType().then(shop_type => {
				this.tlist = shop_type
				this.tlist.unshift({ id: '', shoptype_name: '全部' })
			})
			await this.getArea()
			uni.hideLoading()
		},
		getSearch(name) {
			return new Promise(resolve => {
				let params = {
					add_c: this.params.city,
					latitude: this.params.lat,
					longitude: this.params.lng,
					shop_name: name
				}
				shopIndex(params).then(res => {
					this.getShop(res.recommend)
					resolve()
				})
				
			})
		},		
		getType () {
			return new Promise(resolve => {
				typeIndex(Object.assign({}, this.params, {id: this.typeId })).then(res => {
					this.getShop(res.recommend)
					resolve(res.shop_type)
				})
			})
		},
		getTypeList (type) {
			return new Promise(resolve => {
				let params = {
					lat: this.params.lat,
					lng: this.params.lng,
					order_type: type
				}
				orderType(params).then(res => {
					this.getShop(res.recommend)
					resolve(res.shop_type)					
				})
			})
		},
		AllShop () {
			return new Promise(resolve => {
				getAllShop(this.params).then(res => {
					this.getShop(res.recommend)
					resolve()
				})				
			})
		},
		getRegion (item) {
			return new Promise(resolve => {
				let xm = {
					lat: item.Lat,
					lng: item.Lng,
					add_c: this.params.city,
					add_a: item.Name
				}
				Region(xm).then(res => {
					this.getShop(res.recommend)
					resolve()
				})
			})
		},
		getShop (list) {
			this.shopList = list.map(item => {
				if (item.distance >= 1000) {
					item.distance = `${this.utils.Fxied(this.utils.accEqu(item.distance, 1000), 0)}km`
				}  else {
					item.distance = `${item.distance}m`
				}						
				item.logo = requestURL + item.logo
				return item
			})			
		},
		getArea () {
			return new Promise(resolve => {
				const kx = {
					level: 3,
					pid: 441900
				}
				AreaList(kx).then(res => {
					this.clist = res.province
					resolve()
				})				
			})
		}
	}
}	
	
</script>

<style lang="less">
	@import '../common/styles/variables.less';
	.fixedBody;
	.shop_list {
		display: flex;
		flex-direction: column;
		flex-flow: column;
		overflow: hidden;
		height: 100%;
		.tabs {
			height: @height;
			background-color:white;
			& > view {
				.arrowRight;
				&:not(:last-of-type) {
					&::after {
						position: absolute;
						content: '';
						top: 0;
						right: 0;
						border-right: 1px dashed #eaeaea;
						height: 100%;
						transform: scaleY(.7)
					}
				}
			}
		}
		.main {
			flex: 1;
			overflow: hidden;
			position: relative;
			scroll-view {
				height: 100%;
				.list {
					.item {
						padding: 20upx 15upx;
						&:not(:last-of-type) {
							.border-bottom(15upx)
						}
						display: flex;
						justify-content: space-between;
						.image {
							width: 200upx;
							height: 200upx;
							margin-right: 20upx;
							image {
								display: block;
								width: 100%;
								height: 100%;
							}
						}
						.desc {
							flex: 1;
							.star {
								display: flex;
								padding: 10upx 0;
								image {
									width: 20upx;
									height: 20upx;
									display: block;
									&:not(:last-of-type) {
										margin-right: 6upx;
									}
								}					
							}
							.sell {
								font-size: @minSize;
								margin-bottom: 10upx;
							}
							.send {
								display: flex;
								margin-bottom: 10upx;
								& > view {
									font-size: @minSize;
									&:nth-of-type(1) {
										margin-right: 15upx;
										position: relative;
										padding-right: 15upx;
										&::after {
											height: 100%;
											width: 1px;
											background-color: @gray;
											content: '';
											position: absolute;
											top: 0;
											right: 0;
											transform: scaleY(.6)
										}
									}						
								}
							}
							.address {
								display: flex;
								justify-content: space-between;
								& > view {
									font-size: @minSize;
									&:nth-of-type(1) {
										flex: 3
									}
									&:nth-of-type(2) {
										flex: 1.5;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
									}
								}
							}
						}
					}					
				}
			}
		}		
	}
</style>